import { init } from "snabbdom/build/package/init";
import { h } from "snabbdom/build/package/h"; 
import { classModule } from "snabbdom/build/package/modules/class.js";
import { propsModule } from "snabbdom/build/package/modules/props.js";
import { styleModule } from "snabbdom/build/package/modules/style";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";

const vnodeDataArray = [
	{
		rank: 1,
		title: "海贼王",
		desc:"拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临"
	},
	{
		rank: 2,
		title: "BLEACH",
		desc:"男主角黑崎一护是个看似暴力、单薄，实质上善良、勇敢、爱护家庭的少年，并且拥有能看见灵的体质。家里有一个开诊所的老爸和两个性格正常的妹妹夏梨和游子，一护每天七点必须按时回家，否则老爸便会使用“身体语言教训”的家规教训一护。"
    },
    {
		rank: 3,
		title: "FAIRY TAIL",
		desc:"故事叙述在一个充满魔法的世界——“阿斯兰特（EARTH LAND）”中，位于菲奥雷王国的一个众多厉害魔导士云集的魔导士公会“FAIRY TAIL”。露西一直希望能加入，成为其中的成员。在纳兹的引导下，露西终于得尝所愿，并结识了许多厉害的魔导士。随后，露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”，在这个全世界最吵闹、最暴力，但也是最快乐的公会里，创造出数不清的传说的，借着各种委托人的任务而不断变强，伙伴也一个一个加入，故事就这样渐渐揭开"
	}
];
let data = vnodeDataArray
let vnode = null

const patch = init([
	classModule,
	propsModule,
	styleModule,
	eventListenersModule,
]);

// 渲染每条movie
function movieView(movie){
	return h('div.row',{
		key: movie.rank,
		style:{
			opacity:0,
			transform: 'translate(-200px)',
			delayed: {transform: `translateY(${movie.offset}px)`, opacity: '1'},
			remove: {opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)` }
		}
	},[
		h('div', { style: { fontWeight: 'bold' } }, movie.rank),
		h('div', movie.title),
		h('div', movie.desc),
		h('div.btn.rm-btn', { on: { click: () => {
                remove(movie)
            } 
        } }, 'x'),
	])
}

function remove(movie){
	console.log(movie);
	let tmp = []
	data.forEach(movieItem =>{
		if(movie.rank !== movieItem.rank){
			tmp.push(movieItem)
		}
	})
	
	data = tmp
	console.log(data);
	render()
}


function render(){
	
	data.forEach((movie, index) => {
		movie.offset = index*80
	})
	let newvnode = h('div.list',{}, view(data))
	vnode = patch(vnode, newvnode)
}

function view(data){
	return h('div', [
		// h('div', [
			
		// ]),
		h('div',[
			h('button.btns', {
				on: {
					click: [addOne]
				}
			}, '新增'),
			h('span','按以下排序： '),
			h('button.btns', {
				on: {
					click: () => {
                        sortByType('rank')
                    } 
				}
			}, 'Rank'),
			h('button.btns', {
				on: {
					click: () => {
                        sortByType('title')
                    }
				}
			}, 'Title'),
		
		]),
		
		h('div', data.map(movieView))
	])
}

function sortByType(prop){
	data.sort((a, b) => {
		if (a[prop] > b[prop]) {
		  return 1
		}
		if (a[prop] < b[prop]) {
		  return -1
		}
		return 0
	})
	  render()
}

function addOne(){
	data.push(
		{
			rank: data.length + 1,
			title: "一人之下",
			desc:"随着父亲失踪，神秘少女冯宝宝的造访，少年张楚岚的平静校园生活被彻底颠覆。急于解开爷爷和自身秘密的张楚岚和没有任何记忆“不死少女”冯宝宝开启了“异人”之旅……"
		}
	)
	render()
}

window.addEventListener("DOMContentLoaded", () => {
	let app = document.querySelector("div#app");
	vnode = patch(app,view(data))
	render()
});
